<template>
	<view class="np-swiper-box">
		<view class="np-box" v-if="showVideo">
			<video id="GoodVideo" class="np-image" :autoplay="true" :src="video" :show-fullscreen-btn="false" @pause="pause" @ended="stop" :controls="true"></video>
		</view>
		<view v-else class="np-box">
			<swiper class="np-swiper" circular autoplay @change="bannerSwiper">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<image class="np-image" :src="item.url || item" />
				</swiper-item>
			</swiper>
		</view>
		<text v-if="showVideo" class="np-tag np-black np-round sm np-page" @click="stop">图片展示</text>	
		<text v-if="video && (!showVideo)" class="np-tag np-black np-round sm np-tip" @click="play">播放视频</text>	
		<text v-if="!showVideo" class="np-tag np-grey np-round sm np-page">{{bannerCur + 1}} / {{bannerList.length}}</text>		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerCur: 0,
				showVideo: false
			}
		},
		props: {
			bannerList: {
				type: Array,
				default: () => {
					return []
				}
			},
			video: {
				type: String,
				default: ""
			}
		},
		created() {
			this.videoContext = uni.createVideoContext('GoodVideo');
			if (this.video) {
				this.play();
			}
		},
		beforeDestroy() {
			this.videoContext.stop();
		},
		methods: {
			bannerSwiper(e) {
				this.bannerCur = e.detail.current;
			},
			play() {
				this.showVideo = true;
				this.videoContext.play();
			},
			pause(e) {
				this.videoContext.pause();
				this.showVideo = false;
			},
			stop(e){
				this.videoContext.stop();
				this.showVideo = false;
			}
		}
	}
</script>

<style>
	.np-swiper-box {
		position: relative;
		width: 100%;
	}
	
	.np-box {
		position: relative;
		width: 750rpx;
		height: 750rpx;
	}

	.np-swiper {
		width: 750rpx;
		height: 750rpx;
	}
	
	.np-image {
		width: 750rpx;
		height: 750rpx;
	}

	.np-video {
		position: absolute;
		left: 300rpx;
		bottom: 300rpx;
		z-index: 999;
	}

	.np-video-icon {
		position: absolute;
		left: 300rpx;
		bottom: 300rpx;
		width: 160rpx;
		height: 160rpx;
	}
	
	.np-tip {
		position: absolute;
		bottom: 27.27rpx;
		right: 100rpx;
		z-index: 99;
	}
	
	.np-page {
		position: absolute;
		bottom: 27.27rpx;
		right: 27.27rpx;
		padding: 18.18rpx;
		z-index: 99;
	}
	
	.np-tag {
		font-size: 24upx;
		vertical-align: middle;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0upx 16upx;
		height: 48upx;
		line-height: 48rpx;
		font-family: Helvetica Neue, Helvetica, sans-serif;
		white-space: nowrap;
	}
	
	/* #ifndef MP-QQ */
	.np-tag:not([class*="np"]) {
		background-color: #f1f1f1;
	}
	
	.np-tag+.np-tag {
		margin-left: 10upx;
	}
	/* #endif */
	
	.sm {
		font-size: 20upx;
		padding: 0upx 12upx;
		height: 32upx;
	}
	
	.np-grey {
		background-color: #8799a3;
		color: #ffffff;
	}
	
	.np-black {
		background: rgba(0, 0, 0, 0.6);
		color: #FFFFFF;
	}
	
	.np-round {
		border-radius: 1000upx;
	}
</style>
